<!--_meta 作为公共模版分离出去-->
<!DOCTYPE HTML>
<html>
<head>
    {include file="layout:_meta" /}
    <title>详情</title>
    <style>
        #addressBox{height:20px;width:600px;}
        #mapBox{height:400px;width:600px}
        #pointBox{height:20px;width:600px;}
        #search{border: 1px #a79f9f solid;background: #ffff;padding: 2px 10px;border-radius: 5px;}
    </style>
</head>

<body>
<article class="cl pd-20">
    <form class="form form-horizontal" id="form-admin">
        
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3">公司名称</label>
            <div class="formControls col-xs-8 col-sm-9">
                <select class="input-text" style="width: 180px"  @change='getCase($event)' >
                    <option :value="{'id':0,'company_name':'请选择'}">请选择</option>
                    <option v-for="(item, index) in company" :value="item.id">
                    {{ item.company_name }}
                    </option>
                </select>
            </div>
        </div>

        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3">管理者</label>
            <div class="formControls col-xs-8 col-sm-9">
                <select class="input-text" style="width: 180px"  @change='getUser($event)' >
                    <option :value="{'id':0,'name':'请选择'}">请选择</option>
                    <option v-for="(item, index) in userdata" :value="item.id">
                    {{ item.name }}
                    </option>
                </select>
            </div>
        </div>

        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3">职位</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" class="input-text" v-model="model.title"  placeholder="请输入职位">
            </div>
        </div>

        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3">负责人姓名</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" class="input-text" v-model="model.name"  placeholder="负责人姓名">
            </div>
        </div>

        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3">负责人电话</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="number" oninput="if(value.length>11)value=value.slice(0,11)" class="input-text" v-model="model.mobile"  placeholder="负责人电话">
            </div>
        </div>

        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3">年龄</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" style="width: 50px;"style="width: 100px;" class="input-text" v-model="model.agemin"  placeholder="18"> - 
                <input type="text" style="width: 50px;" class="input-text" v-model="model.agemax"  placeholder="60">
            </div>
        </div>

         <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3">职位类型</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="radio" v-model="model.type" :checked="model.type==1?true:false" :value="1"> 全职
                <input type="radio" v-model="model.type" :checked="model.type==2?true:false" :value="2"> 兼职
            </div>
        </div>

        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3">职位类别</label>
            <div class="formControls col-xs-8 col-sm-9">
                <select class="input-text" style="width: 180px"  @change='getJob($event)' >
                    <option :value="{'id':0,'name':'请选择'}">请选择</option>
                    <option v-for="(item, index) in jobtypedata" :value="item.id">
                    {{ item.name }}
                    </option>
                </select>
            </div>
        </div>

        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3">区域</label>
            <div class="formControls col-xs-8 col-sm-9">
                <select class="input-text" style="width: 180px" v-model="selectedP" @change='getP($event)'>
                    <option :value="{'id':0,'name':'请选择'}">请选择</option>
                    <option v-for="(item, index) in province" :value="item.id">
                    {{ item.name }}
                    </option>
                </select>

                <select class="input-text" style="width: 180px" v-model="selectedC" @change='getC($event)'>
                    <option :value="{'id':0,'name':'请选择'}">请选择</option>
                    <option v-for="(item, index) in city" :value="item.id+'_'+item.name">
                    {{ item.name }}
                    </option>
                </select>

                <select class="input-text" style="width: 180px" v-model="selectedR" @change='getR($event)'>
                    <option :value="{'id':0,'name':'请选择'}">请选择</option>
                    <option v-for="(item, index) in region" :value="item.id+'_'+item.name">
                    {{ item.name }}
                    </option>
                </select>

            </div>
        </div>

        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3">薪水</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" style="width: 100px;" class="input-text" v-model="model.salary"  placeholder="薪水">
            </div>
        </div>

        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3">返利佣金</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" style="width: 100px;" class="input-text" v-model="model.rebate"  placeholder="返利佣金">
            </div>
        </div>

        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3">性别要求:</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="radio" v-model="model.sex" :checked="model.sex==1?true:false" :value="1"> 男
                <input type="radio" v-model="model.sex" :checked="model.sex==2?true:false" :value="2"> 女
                <input type="radio" v-model="model.sex" :checked="model.sex==3?true:false" :value="3"> 不限
            </div>
        </div>

        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3">其他福利</label>
            <div class="formControls col-xs-8 col-sm-9">
                <template v-for="item in welfaredata">
                <input type="checkbox" @change="box($event)" :value="item.name">
                <label style="margin-right: 6px;">{{item.name}}</label>
                </template>
            </div>
        </div>

        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3">阅读数</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" style="width: 100px;" class="input-text" v-model="model.read"  placeholder="阅读数">
            </div>
        </div>

        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3">分享数</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" style="width: 100px;" class="input-text" v-model="model.share"  placeholder="分享数">
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3">收藏数 </label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" style="width: 100px;" class="input-text" v-model="model.collect"  placeholder="收藏数">
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3">是否首页推荐：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="radio" v-model="model.is_rec" :checked="model.is_rec==0?true:false" :value="0"> 否
                <input type="radio" v-model="model.is_rec" :checked="model.is_rec==1?true:false" :value="1"> 是
            </div>
        </div>

        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3">是否置顶 </label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="radio" v-model="model.is_top" :checked="model.is_top==0?true:false" :value="0"> 否
                <input type="radio" v-model="model.is_top" :checked="model.is_top==1?true:false" :value="1"> 是
            </div>
        </div>

        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3">审核状态 </label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="radio" v-model="model.status" :checked="model.status==0?true:false" :value="0"> 未审核
                <input type="radio" v-model="model.status" :checked="model.status==1?true:false" :value="1"> 审核
            </div>
        </div>

        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3">公司地址：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <div class="map">
                    <input id="addressBox" type="text" class="input-text" v-model="model.address" placeholder="请输入结构化地址，例如北京市朝阳区望京街道首开广场" />
                    <input id="search" type="button" onclick="geocoder();" value="搜索" />
                </div>
                <div id='pointBox'>&nbsp;</div>
                <div id='mapBox'></div>
            </div>
        </div>

        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3">职位内容</label>
            <div class="formControls col-xs-8 col-sm-9">
                <textarea rows="30" cols="100" v-model="model.content"></textarea>
            </div>
        </div>
        
        <div class="row cl">
            <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">
                <input class="btn btn-primary radius" v-on:click="doSubmit()" value="提交">
            </div>
        </div>
    </form>
</article>

<!--_footer 作为公共模版分离出去-->
{include file="layout:_footer" /}
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.3&key=b67058cb0a68107dad0e617bad23b06e&plugin=AMap.Geocoder"></script>
<script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>
<!--/_footer 作为公共模版分离出去-->
<script type="text/javascript">
    var model = {
        selectedP:{'id':0,'name':'请选择'},
        selectedC:{'id':0,'name':'请选择'},
        selectedR:{'id':0,'name':'请选择'},
        company:{},
        welfaredata:{},
        userdata:{},
        jobtypedata:{},
        province:{},
        city:{},
        region:{},
        provinceid:0,
        welfarearr:[],
        model: {
            company_id:0,
            user_id:0,
            type:0,
            sex:0,
            is_rec:0,
            is_top:0,
            status:0,
            content:''
        }
    };
    
    var store_model = new Vue({
        el: "#form-admin",
        data: model,
        methods: {
            getCase:function (e) {
                store_model.model.company_id = e.target.value
            },
            getUser:function (e) {
                store_model.model.user_id = e.target.value
            },
            getJob:function (e) {
                store_model.model.jobtype = e.target.value
            },
            box:function(e){
                var v = e.target.value;
                if(e.target.checked){
                    store_model.welfarearr.unshift(v);
                }else{
                    store_model.welfarearr.some((item, i)=>{
    　　　　　　　　　　if(item==v){
        　　　　　　　　　　store_model.welfarearr.splice(i, 1)
    　　　　　　　　　　　　return true
    　　　　　　　　　　}
    　　　　　　　　})
                }

                //console.log(store_model.welfarearr)
            },
            //获取省下面市
            getP:function(e){
                var id = e.target.value;
                store_model.provinceid = id;
                $.ajax({
                    type: 'post',
                    data: {pid:id},
                    url: "{:url('Position/city')}",
                    cache: false,
                    dataType: 'json',
                    success: function (ret) {
                        if(ret){
                            store_model.city = ret;
                        }
                    }
                });
            },
            //获取城市下面的区域
            getC:function(e){
                var str = e.target.value;
                var v = str.split("_");
                var id = v[0]

                if(store_model.provinceid == 110000 || store_model.provinceid == 120000
                || store_model.provinceid == 500000 || store_model.provinceid == 310000){
                    store_model.model.region_id = v[0]
                    store_model.model.region_name = v[1]
                }else{
                    $.ajax({
                        type: 'post',
                        data: {pid:id},
                        url: "{:url('Position/city')}",
                        cache: false,
                        dataType: 'json',
                        success: function (ret) {
                            if(ret){
                                store_model.region = ret;
                            }
                        }
                    });
                }
                
            },
            getR:function(e){
                var str = e.target.value;
                var v = str.split("_");
                store_model.model.region_id = v[0]
                store_model.model.region_name = v[1]
                
            },
            doSubmit: function () {
                var _this = this;
                if(store_model.welfarearr){
                    _this.model.welfare =  store_model.welfarearr.join(',');
                }
                $.ajax({
                    type: 'post',
                    data: _this.model,
                    url: "{:url('Position/set')}",
                    cache: false,
                    dataType: 'json',
                    success: function (ret) {
                        if (ret.status == true) {
                            layer.msg(ret.message, function () {
                                parent.location.href="{:url('Position/index')}";
                                layer_close();
                            })
                        } else {
                            layer.msg(ret.message);
                        }
                    }
                });
            }
            
        }
    });

    util.get("{:url('position/set')}", {},function (data) {
        store_model.company = data.data.company;
        store_model.province= data.data.province;
        store_model.welfaredata = data.data.welfaredata;
        store_model.userdata = data.data.userdata;
        store_model.jobtypedata = data.data.jobtypedata;
    });



    var $addressBox = document.getElementById('addressBox');
var $pointBox = document.getElementById("pointBox");

//创建地图
var map = new AMap.Map("mapBox", {
    resizeEnable: true,
    center: [116.397428, 39.90923],
    zoom:14
});

//添加标注
function addMarker(point) {
    var marker = new AMap.Marker({
        map: map,
        position: [ point.getLng(),  point.getLat()]
    });
}

//地图中心点添加标注
function addCenterPoint(){
    map.clearMap();
    var centerPoint = map.getCenter();
    addMarker(centerPoint);
    store_model.model.latitude = centerPoint.getLat();
    store_model.model.longitude = centerPoint.getLng();
    $pointBox.innerHTML = "当前经纬度为：" + centerPoint.getLng() + ',' + centerPoint.getLat();
}
addCenterPoint();

function geocoder() {
    map.clearMap();
    var myGeo = new AMap.Geocoder();
    //地理编码,返回地理编码结果
    myGeo.getLocation(model.model.address, function(status, result) {
        if (status === 'complete' && result.info === 'OK') {
            //地址解析成功
            geocoder_CallBack(result);
        }
        else{
            //地址解析失败
            $pointBox.innerHTML = "查无此地址";
        }
    });
}

//地理编码返回结果展示
function geocoder_CallBack(data) {
    var resultStr = "";
    var geocode = data.geocodes;
    addMarker(geocode[0].location);
    resultStr += "当前坐标</b>：" + geocode[0].location.getLng() + ", " + geocode[0].location.getLat();
    map.setFitView();
    $pointBox.innerHTML = resultStr;
}

map.on('moveend', function() {
    addCenterPoint();
});
    
</script>
<!--/请在上方写此页面业务相关的脚本-->
</body>
</html>